<template>
  <!-- html 结构 -->
  <div class="person">
    <!-- :value 等价于 v-bind:value，都是单项绑定，即只能是数据到页面 -->
    <!-- v-model 双向绑定 -->
    姓：<input type="text" v-model="firstName" /> <br />
    名：<input type="text" v-model="lastName" /><br />
    全名：{{ fullName }}<br />
    <button @click="changeFullName">修改名字</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref, computed } from "vue";
let firstName = ref("zhang");
let lastName = ref("san");
console.log(firstName.value, lastName.value);

// 计算属性 computed，这么定义的fullName是一个计算属性，且是只读
// let fullName = computed(() => {
//   return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value;
// });

// 这么定义的fullName是一个计算属性，可读可写
let fullName = computed({
  get() {
    return (
      firstName.value.slice(0, 1).toUpperCase() +
      firstName.value.slice(1) +
      "-" +
      lastName.value
    );
  },
  // computed 计算属性得到的值是一个ref对象

  set(val) {
    console.log("set", val);
    // firstName.value = val.split('-')[0]
    // lastName.value = val.split('-')[1]
    const [str1, str2] = val.split("-");
    firstName.value = str1;
    lastName.value = str2;
  },
});

function changeFullName() {
  fullName.value = "li-si";
}
</script>

<style>
/* 样式 */
.person {
  background-color: aqua;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 10px;
}
button {
  margin: 0 5px;
}
</style>
